<!--
 * @Description: 
 * @Author: lwx
 * @Date: 2023-03-31 10:37:43
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-21 14:03:23
-->
<template>
  <div class="task_board">
     <div class="head_top">
        <img src="@/assets/img/task_title.png" class="w-100">
     </div>
     <div class="board_body">
        <div class="my-3">
          <process-num/>
        </div>
        <div class="task_table">
            <div class="date">
              <div class="fl">
                <span class="mr-3">日期</span>
                <el-date-picker
                  v-model="today"
                  type="date"
                  size="small"
                  placeholder="选择日期"
                  style="width:160px"
                  value-format="yyyy-MM-dd"
                  @change="getOrderTask">
                </el-date-picker>
              </div>
              <div class="fr">
                <el-button type="primary" @click="start" class="_btn">开始生产</el-button>
                <el-button type="primary" @click="$router.go(-1)" class="_btn">返回</el-button>
              </div>
            </div>
            <el-table
              border
              class="mt-2"
              size="mini"
              :data="taskList"
              :cell-style="{borderColor:'#069!important'}"
              :header-cell-style="{borderColor:'#069!important'}"
              @row-click="changeRadio"
              :row-style="selectedRowStyle"
              align="center">
              <el-table-column label="选择" width="80" align="center">
                <template slot-scope="scope">
                  <el-radio :label="scope.row.tasks_id" v-model="rowIndex">{{ '' }}</el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="order_no"
                label="订单号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="work_no"
                label="任务号"
                align="center">
              </el-table-column>
              <el-table-column 
                prop="task_name" 
                label="任务名称" 
                align="center">
              </el-table-column>
              <el-table-column 
                prop="product_no" 
                label="产品编号" 
                align="center">
              </el-table-column>
              <el-table-column 
                prop="product_name" 
                label="产品名称" 
                align="center">
              </el-table-column>
              <el-table-column 
                prop="amount" 
                label="任务数量" 
                align="center">
              </el-table-column>
              <el-table-column 
                prop="task_done" 
                label="已完成数量" 
                align="center">
              </el-table-column>
              <el-table-column 
                prop="process_code" 
                label="工艺代号" 
                align="center">
              </el-table-column>
              <el-table-column 
                label="任务状态" 
                align="center">
                <template slot-scope="scope">
                  <span :class="scope.row.task_status==='未完成'?'shenlan':'qingse'">{{ scope.row.task_status }}</span>
                </template>
              </el-table-column>
            </el-table>        
        </div>       
     </div>
  </div>
</template>

<script>
import ProcessNum from "../dashboard/childComps/ProcessNum.vue";
import { orderTask, taskStart } from "@/api/task.js";
import { formatTime } from "@/utils";
export default {
  components:{
    ProcessNum
  },
  data () {
    return {
      today: formatTime(new Date(), "yyyy-MM-dd"),
      taskList: [],
      rowIndex: "",
      timer: null,
    }
  },
  created() {
    this.getOrderTask(this.today);
  },
  methods:{
    //获取任务
    async getOrderTask(date) {
      const {data} = await orderTask({ start: date, finish: date });
      this.taskList = data;
    },
    //单选框
    changeRadio(row) {
      this.rowIndex = row.tasks_id;
    },
    selectedRowStyle({ row, rowIndex }){
      if (this.rowIndex === row.tasks_id) {
        return {
          "background-color": "#072951!important",
          "box-shadow":"-10px 0px 15px #2C58A6 inset"
        };
      }
    },
    //开始生产
    async start() {
      await taskStart({ tasks_id: this.rowIndex, status: 1 });
      this.$message.success("成功！");
      this.getOrderTask(this.today);
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        this.timer = setInterval(() => {
          this.getOrderTask(this.today);
        }, 1000 * 60 * 3);
      }
    },
  }

}
</script>
<style lang='scss' scoped>
.task_board{
    width: 100%;
    height: 100%;
    background-color: #010429;
    background-size: 100% 100%;
    overflow: scroll;
    color: #17caf0;
    padding: 0 25px;
}
.board_body{
    padding: 0 45px;
}

.task_table{
    width: 100%;
    height: 700px;
    background: url('../../assets/img/task_border.png') no-repeat;
    background-size: 100% 100%;
    padding: 45px;
    .date{
      padding:0 20px;
      height:45px
    }
}
.task_table ::v-deep .el-table{
  border-color: #069;
}
.task_table ::v-deep .el-table th{
  background-color: #001741!important;
  font-size: 16px;
  color: #17caf0;
  font-weight: normal;
}
.task_table ::v-deep .el-table tr{
    background-color: transparent!important;
    color: #68d8fe;
    font-size: 14px;
}
.task_table ::v-deep  .el-table, .el-table__expanded-cell {
    background-color: transparent!important;
}
.task_table ::v-deep .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent!important;
}
.task_table ::v-deep .el-table--border::after, .el-table--group::after, .el-table::before{
  background-color:#069!important;
}
.task_table ::v-deep .el-input__inner{
  background: #072951!important;
  color: #17caf0;
  border: 1px solid #17caf0;
  font-size: 14px
}

</style>
